<template>
    <svg :class="['icon', className]" :style="{ width: size, height: size, fill: color }" viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg" @click="$emit('click')">
        <!-- 如果 iconPath 是数组，则遍历渲染 -->
        <template v-if="Array.isArray(iconPath)">
            <path v-for="(path, index) in iconPath" :key="index" :d="path" />
        </template>
        <!-- 否则直接渲染单个 path -->
        <path v-else :d="iconPath" />
    </svg>


</template>

<script setup>
import { computed } from 'vue';
import icons from '../assets/icons/index';

// 接收 props
const props = defineProps({
    name: {
        type: String,
        required: true, // 图标名称
    },
    size: {
        type: [String, Number],
        default: '24px', // 默认大小
    },
    color: {
        type: String,
        default: '#000000', // 默认颜色
    },
    className: {
        type: String,
        default: '', // 自定义类名
    },
});

// 使用 computed 计算当前图标的路径
const iconPath = computed(() => {
    const icon = icons[props.name];
    if (!icon) {
        console.warn(`Icon "${props.name}" not found.`);
        return '';
    }
    return icon;
});
</script>

<style scoped>
.icon {
    display: inline-block;
    vertical-align: middle;
}
</style>